<template style="background: rgb(246,246,246)">
  <div class="el-row">
    <div class="el-col-14 el-col-offset-5 ">
      <div class="el-row grid-content bg-purple-dark card" style="background: rgb(246,246,246); ">
        <div style="height: 250px"></div>
      </div>
      <div class="el-row grid-content bg-purple-dark card">
        <div class="el-col-offset-1 img-card" id="hh">
          <el-upload
              class="avatar-uploader"
              action
              :http-request="uploadAvatar"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload"
          >
            <img :src="user.avatar_url">
            <!--<img v-if="imageUrl" :src="imageUrl" class="avatar" />-->
            <div class="ppp">
              <el-icon style="padding-top: 40%" class="avatar-uploader-icon"><plus /></el-icon>
              <h3>更换头像</h3>
            </div>
          </el-upload>

          <input id="photo" type="file" accept="image/png,image/jpeg" @click="upload_photo" style="display: none">
        </div>
        <div class="el-col-16 el-col-offset-1">
          <div class="el-row">
            <h1 class="title el-col-20" id="title" >
              <span class="name">{{userInfo.nickname}}</span>
              <el-button type="text" circle  style="margin-left: 30px" @click="editT">
                <span class="iconfont infoIcon">&#xe66e;</span>
              </el-button>
            </h1>
            <form id="e1" class="el-col-20">
              <el-row style="margin-top: 30px">
                <span style="font-size: 20px;line-height: 1.6">用户名</span>
                <el-input v-model="userInfo.nickname" class="el-col-14 el-col-offset-3" type="text" id="nickname" name="nickname" size="medium"></el-input>
              </el-row>
              <el-row style="margin-top: 30px">
                <el-button class="el-col-offset-5" type="primary" @click="submitT">保存</el-button>
                <el-button class="el-col-offset-1" @click="cancel">取消</el-button>
              </el-row>
            </form>
            <el-button id="e2" type="text" circle size="large" style="float: right; color: grey;" @click="gotolink">
              返回我的主页<span class="iconfont infoIcon">&#xe631;</span>
            </el-button>
          </div>
          <div class="block" id="idsex">
            <el-row>
              <div class="el-col-6" style="display: flex; align-items: center">
                <span class="colma">性别</span>
              </div>
              <div class="el-col-14" id="sex" style="display: flex; align-items: center">
                <span class="colmaL" v-if="userInfo.sex == 1">男</span>
                <span class="colmaL" v-else>女</span>
                <el-button id="idsexb" type="text" circle  style="margin-left: 30px" @click="editS">
                  <span class="iconfont infoIcon">&#xe66e;</span>
                </el-button>
              </div>
              <div id="sexE" style="display: none; align-items: center">
                <el-radio v-model="userInfo.sex" label="1">男</el-radio>
                <el-radio v-model="userInfo.sex" label="0">女</el-radio>
              </div>
            </el-row>
            <el-row id="sexT" style="display:none; padding-top: 20px;">
              <el-button class="el-col-offset-6" type="primary" @click="submitS">保存</el-button>
              <el-button class="el-col-offset-1" @click="cancelS">取消</el-button>
            </el-row>
          </div>
          <div class="block" id="idsig">
            <el-row>
              <div class="el-col-6" style="display: flex; align-items: center">
                <span class="colma">一句话介绍</span>
              </div>
              <div class="el-col-14" id="sg" style="display: flex; align-items: center">
                <span class="colmaL">{{userInfo.signature}}</span>
                <el-button id="idsigb" type="text" circle  style="margin-left: 30px" @click="editSg">
                  <span class="iconfont infoIcon">&#xe66e;</span>
                </el-button>
              </div>
              <div id="sgE" class="el-col-14" style="display: none; align-items: center">
                <el-input v-model="userInfo.signature" class="el-col-24" type="text" size="large"></el-input>
              </div>
            </el-row>
            <el-row id="sgT" style="display:none; padding-top: 20px;">
              <el-button class="el-col-offset-6" type="primary" @click="submitSg">保存</el-button>
              <el-button class="el-col-offset-1" @click="cancelSg">取消</el-button>
            </el-row>
          </div>
          <div class="block" id="idcit">
            <el-row>
              <div class="el-col-6" style="display: flex; align-items: center">
                <span class="colma">居住地</span>
              </div>
              <div class="el-col-14" id="add" style="display: flex; align-items: center">
                <span class="colmaL">{{user.city}}</span>
                <el-button id="idcitb" type="text" circle  style="margin-left: 30px" @click="editAdd">
                  <span class="iconfont infoIcon">&#xe66e;</span>
                </el-button>
              </div>
              <div id="addE" class="el-col-14" style="display: none; align-items: center">
                <el-select v-model="province_id1" placeholder="请选择">
                  <el-option
                      v-for="item in provinceInfo"
                      :key="item.province_id"
                      :label="item.province_name"
                      :value="item.province_id">
                  </el-option>
                </el-select>
                <el-select id="ct" v-model="userInfo.city_id" placeholder="请选择" @focus="get_city">
                  <el-option
                      v-for="item in cityInfo"
                      :key="item.city_id"
                      :label="item.name"
                      :value="item.city_id">
                  </el-option>
                </el-select>
              </div>
            </el-row>
            <el-row id="addT" style="display:none; padding-top: 20px;">
              <el-button class="el-col-offset-6" type="primary" @click="submitAdd">保存</el-button>
              <el-button class="el-col-offset-1" @click="cancelAdd">取消</el-button>
            </el-row>
          </div>
          <div class="block" id="idind">
            <el-row>
              <div class="el-col-6" style="display: flex; align-items: center">
                <span class="colma">所在行业</span>
              </div>
              <div class="el-col-14" id="ind" style="display: flex; align-items: center">
                <span class="colmaL">{{user.industry}}</span>
                <el-button id="idind" type="text" circle  style="margin-left: 30px" @click="editind">
                  <span class="iconfont infoIcon">&#xe66e;</span>
                </el-button>
              </div>
              <div id="indE" class="el-col-14" style="display: none; align-items: center">
                <el-select v-model="userInfo.industry_id" placeholder="请选择">
                  <el-option
                      v-for="item in industryInfo"
                      :key="item.industry_id"
                      :label="item.industry_name"
                      :value="item.industry_id">
                  </el-option>
                </el-select>
              </div>
            </el-row>
            <el-row id="indT" style="display:none; padding-top: 20px;">
              <el-button class="el-col-offset-6" type="primary" @click="submitind" >保存</el-button>
              <el-button class="el-col-offset-1" @click="cancelind">取消</el-button>
            </el-row>
          </div>
          <div class="block" id="idedu">
            <el-row>
              <div class="el-col-6" style="display: flex; align-items: center">
                <span class="colma">教育经历</span>
              </div>
              <div class="el-col-14" id="edu" style="display: flex; align-items: center">
                <span class="colmaL">
                  <span class="iconfont infoIcon" style="color: rgb(152,0,66)">&#xe673;</span>
                  <span class="infoItem" style="padding-left: 20px">深圳大学</span><br>
                </span>
                <el-button type="text" circle  style="margin-left: 30px">
                  <span class="iconfont infoIcon">&#xe66e;</span>
                </el-button>
              </div>
            </el-row>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {getUser, updateUserInfo, uploadPhoto} from "@/network/user";
import {getIndustry} from "@/network/industry";
import {getCity, getProvince} from "@/network/address";
import {currentLoginData} from "@/assets/js/common";
import emitter from "tiny-emitter/instance"

export default {
  name: "Edit",
  data(){
    return{
      user: 0,
      userId: 0,
      detailS: false,
      detailSg: false,
      detailC: false,
      detailI: false,
      detailP: true,
      province_id1: "",
      industryInfo:[{
        industry_id: 0,
        industry_name: ""
      }],
      provinceInfo:[{
        province_id: 0,
        province_name: ""
      }],
      userInfo:{
        user_id: 0,
        nickname: "",
        signature: "",
        sex: 0,
        industry_id: 1,
        city_id: ""
      },
      cityInfo: [{
        province_id: 0,
        province_name:"",
        city_id: 0,
        name: ""
      }]
    }
  },
  created() {
    this.get_user();
    this.get_industry()
    this.get_province()
  },
  methods: {
    get_user() {
      this.userId = this.$route.params["user_id"]
      getUser(this.userId).then((res)=>{
        this.user = res.data
        //console.log(res)
        this.userInfo.user_id = res.data.user_id
        this.userInfo.nickname = res.data.nickname
        this.userInfo.signature = res.data.signature
        this.userInfo.sex = res.data.sex
        this.userInfo.industry_id = res.data.industry_id
        //console.log(this.userInfo)
      })
    },
    get_industry() {
      getIndustry().then((res)=>{
        this.industryInfo = res.data
        //console.log(res)
        this.industryInfo.industry_id = res.data.industry_id
        this.industryInfo.industry_name = res.data.industry_name
        //console.log(this.industryInfo)
      })
    },
    get_province() {
      getProvince().then((res)=>{
        this.provinceInfo = res.data
        this.provinceInfo.province_id = res.data.province_id
        this.provinceInfo.province_name = res.data.province_name
        //console.log(this.provinceInfo)
      })
    },
    get_city() {
      getCity(this.province_id1).then((res)=>{
        this.cityInfo = res.data
        this.cityInfo.city_id = res.data.city_id
        this.cityInfo.name = res.data.name
        //console.log(this.cityInfo)
        //console.log(this.userInfo)
      })
    },
    upload_photo() {
      console.log(document.getElementById('photo').value)
      //uploadPhoto(this.userId,document.getElementById('photo').value)
    },
    gotolink() {
      this.$router.replace('/app/user_info/'+this.userId+'/Answer');
    },
    editT() {
      document.getElementById('e1').style.display = "block";
      document.getElementById('title').style.display = "none";
      document.getElementById('e2').style.display = "none";
    },
    cancel() {
      document.getElementById('e1').style.display = "none";
      document.getElementById('title').style.display = "block";
      document.getElementById('e2').style.display = "block";
    },
    submitT() {
      updateUserInfo(this.userId,this.userInfo);
      document.getElementById('e1').style.display = "none";
      document.getElementById('title').style.display = "block";
      document.getElementById('e2').style.display = "block";
    },
    editS() {
      document.getElementById('sexE').style.display = "flex";
      document.getElementById('sex').style.display = "none";
      document.getElementById('sexT').style.display = "flex";
    },
    cancelS() {
      document.getElementById('sexE').style.display = "none";
      document.getElementById('sexT').style.display = "none";
      document.getElementById('sex').style.display = "flex";
    },
    submitS() {
      updateUserInfo(this.userId,this.userInfo);
      document.getElementById('sexE').style.display = "none";
      document.getElementById('sexT').style.display = "none";
      document.getElementById('sex').style.display = "flex";
    },
    editSg() {
      document.getElementById('sgE').style.display = "flex";
      document.getElementById('sg').style.display = "none";
      document.getElementById('sgT').style.display = "flex";
    },
    cancelSg() {
      document.getElementById('sgE').style.display = "none";
      document.getElementById('sgT').style.display = "none";
      document.getElementById('sg').style.display = "flex";
    },
    submitSg() {
      updateUserInfo(this.userId,this.userInfo);
      document.getElementById('sgE').style.display = "none";
      document.getElementById('sgT').style.display = "none";
      document.getElementById('sg').style.display = "flex";
    },
    editind() {
      document.getElementById('indE').style.display = "flex";
      document.getElementById('ind').style.display = "none";
      document.getElementById('indT').style.display = "flex";
    },
    cancelind() {
      document.getElementById('indE').style.display = "none";
      document.getElementById('indT').style.display = "none";
      document.getElementById('ind').style.display = "flex";
    },
    submitind() {
      updateUserInfo(this.userId,this.userInfo);
      document.getElementById('indE').style.display = "none";
      document.getElementById('indT').style.display = "none";
      document.getElementById('ind').style.display = "flex";
      this.user.industry = this.industryInfo[this.userInfo.industry_id -1].industry_name;
    },
    editAdd() {
      document.getElementById('addE').style.display = "flex";
      document.getElementById('add').style.display = "none";
      document.getElementById('addT').style.display = "flex";
    },
    cancelAdd() {
      document.getElementById('addE').style.display = "none";
      document.getElementById('addT').style.display = "none";
      document.getElementById('add').style.display = "flex";
    },
    submitAdd() {
      updateUserInfo(this.userId,this.userInfo);
      document.getElementById('addE').style.display = "none";
      document.getElementById('addT').style.display = "none";
      document.getElementById('add').style.display = "flex";
      console.log(this.userInfo)
      this.user.city = document.getElementById('ct').value
    },
    editP() {
      this.detailP = !this.detailP
    },
    uploadAvatar(request) {
      currentLoginData(loginData=> {
        if (loginData['isLogin']) {
          let userId = this.userId;
          let file = request.file;
          let formData = new FormData();
          formData.append("file", file);
          uploadPhoto(userId, formData).then(res=> {
            this.user.avatar_url = res.data.avatar_url;
            emitter.emit("updateAvatar");
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">

$main-radius: 10px;
@mixin simple-shadow {
  box-shadow: 0 1px 5px rgba(27,31,35, .15), 0 0 1px rgba(106,106,106, .15);
}
.card{
  @include simple-shadow();
}

.img-card {
  position: relative;
  top: -40px;
  background: #ffffff;
  border-radius: 10px;
  width: 208px;
  height: 208px;
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    width: 200px;
    height: 200px;
    border-radius: 10px;
  }
}

.title {
  margin-bottom: 10px;
  display: flex;
  flex: 1 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  .name {
    font-size: 30px;
    font-weight: bolder;
  }
}

.colma {
  font-size: 18px;
  font-weight: bold;
  color: rgb(68,68,68);
}

.colmaL {
  font-size: 18px;
  color: rgb(68,68,68);
}

.info {
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  .infoIcon {
    padding-right: 15px;
  }
  .infoItem {
    line-height: 2.2;
  }
}

.detail {
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  .infoType {
    width: 60px;
    font-size: 16px;
    margin-right: 35px;
    font-weight: 600;
    margin-bottom: 15px;
  }
  .infoIcon {
    padding-right: 15px;
  }
  .infoItem {
    font-size: 16px;
    line-height: 3;
    margin-bottom: 15px;
  }
}

.xiala {
  margin-top: 10px;
  display: inline;
  text-overflow: ellipsis;
  white-space: nowrap;
  .shot {
    display: inline-block;
    width: 30%;
    .infoIcon {
      padding-right: 15px;
    }
    .tip {
      line-height: 2.2;
      color: grey;
    }
    &:hover {
      cursor: pointer;
    }
  }

}

.trans {
  height:70px ;
  overflow: hidden;
  transition: height 500ms ease-out 0s;
}

#e1 {
  display: none;

}

.block {
  border-bottom: rgb(222,222,222) solid 2px;
  padding-bottom: 40px;
  padding-top: 40px;
}
.ppp{
  display: none;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
  img{
    display: none;
  }
  .ppp {
    display: block;
  }
}
</style>
